<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :label-width="model.labelWidth == null?'150px':model.labelWidth+'px'">
      <template v-for="(attr,index) in model.attrs" v-if="attr.need == true">
        <el-form-item :label="attr.describe">
          <template v-if="attr.type=='enum'">
            <el-select v-model="form[attr.name]" :placeholder="'请选择' + attr.describe">
                <el-option  v-for="item in attr.enum" :key="item.value" :label="item.name" :value="item.value" ></el-option>
            </el-select>
          </template>
          <template v-if="attr.type=='fetch-enum'">
            <el-select v-model="form[attr.name]" :placeholder="'请选择' + attr.describe">
                <el-option v-for="item in attr.enum" :key="item.value" :label="item.name" :value="item.value" ></el-option>
            </el-select>
          </template>
          <template v-if="attr.type=='string'">
            <el-input v-model="form[attr.name]"></el-input>
          </template>
          <template v-if="attr.type=='text'">
            <el-input v-model="form[attr.name]" type="textarea" :rows="attr.rows == null?'12':attr.rows"></el-input>
          </template>
          <template v-if="attr.type=='int'">
            <el-input-number v-model="form[attr.name]"></el-input-number>
          </template>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
  import { save } from '@/api/rest-api'
  import request from '@/utils/request'

  export default {
    data() {
      return {
        form: {
        },
        roles: {}
      }
    },
    mounted() {
      for (var index in this.model.attrs) {
        var attr = this.model.attrs[index]
        if (attr.type === 'int') {
          this.form[attr.name] = 0
        }
        if (attr.type === 'fetch-enum') {
          this.requestEnum(index, {
            url: attr.fetchEnumUrl,
            method: attr.fetchEnumMethod,
            params: attr.fetchEnumParams
          })
        }
        if (attr.default != null) {
          this.form[attr.name] = attr.default
        }
      }
    },
    props: {
      model: {
        type: Object,
        default: {}
      }
    },
    methods: {
      requestEnum(index, param) {
        request(param).then(response => {
          var attr = this.model.attrs[index]
          var paths = attr.fetchEnumListName.split('.')
          attr.enum = response
          for (var i in paths) {
            var path = paths[i]
            attr.enum = attr.enum[path]
          }
          var enums = attr.enum
          attr.enum = []
          for (i in enums) {
            var e = {}
            e.name = (enums[i])[attr.fetchEnumName]
            e.value = (enums[i])[attr.fetchEnumValue]
            attr.enum.push(e)
          }
          this.model.attrs[index] = attr
          this.$forceUpdate()
        })
      },
      onSubmit() {
        save(this.model.apiUrlHeader, this.form).then(response => {
          if (response.code === 1) {
            this.$message('新增成功!')
            this.$router.push({ path: this.model.router })
          } else {
            this.$message({
              message: response.msg,
              type: 'warning'
            })
          }
        })
      },
      onCancel() {
        this.$router.push({ path: this.model.router })
      }
    }
  }
</script>

<style scoped>
  .line {
    text-align: center;
  }
</style>
